<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flat UI</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Loading Bootstrap -->
  <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">

  <!-- Loading Flat UI -->
  <link href="{{STATIC_URL}}css/flat-ui.css" rel="stylesheet">
  <!--link href="{{STATIC_URL}}css/login.css" rel="stylesheet"-->
  <link rel="shortcut icon" href="{{STATIC_URL}}images/favicon.ico">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <![endif]-->
    </head>
    <body>
      <div class="container">

        <div class="row">
          <div class="span6">
            <div class="row demo-navigation">
              <div class="span7">
                <div class="btn-toolbar">
                  <img class="logo" src="{{STATIC_URL}}images/logo.png">
                  <div class="btn-group">
                    <a class="btn btn-info" href="home"><i class="fui-cmd-16"></i></a>
                    <a class="btn btn-info" href="add"><i class="fui-plus-16"></i></a>
                    <a class="btn btn-info" href="update"><i class="fui-new-16"></i></a>
                    <a class="btn btn-info" href="delete"><i class="fui-cross-16"></i></a>
                    <a class="btn btn-info" href="settings"><i class="fui-settings-16"></i></a>

                    <div style="display: inline-table; margin:0" class=" active navbar btn btn-info navbar-inverse">
                      <ul class="nav" style="margin:0 !important">
                        <li>
                          <i class="fui-man-16"></i> <span>{% if user.first_name %} {{user.first_name}} {%else%}{{user.username}}{%endif%}</span>
                          <ul>
                            <li><a href="#">Account</a></li>
                            <li><a href="/logout">Logout</a></li>
                            <li><a href="/about">About SQFlight</a></li>
                          </ul>
                        </li>
                      </ul>
                    </div><!--/.nav-collapse -->

                  </div>
                </div> <!-- /toolbar -->
              </div>
            </div> <!-- /demo-navigation -->
          </div>
        </div>

        <div class="row demo-tiles">
          <div class="span12">
            <h3>
              <img  class="icon-little" src="{{STATIC_URL}}images/illustrations/time.png">
              <span>Account Settings</span>
            </h3>
            <div class="tile">


              <div class="login">

                <div class="login-screen">
                  <div class="login-icon">
                    <i class="login-field-icon fui-man-16" style="font-size:100px;"></i>
                    <h4>{{user.username}} <small>Change your account data</small></h4>
                  </div>
                  <form style="display:block;" action="acco_update" method="POST" id="form">{% csrf_token %}
                    <p>
                      <label for="first-name">First name</label>
                      <input name="first-name" type="text" class="login-field" value="{{user.first_name}}" placeholder="First name" id="first-name" />
                    </p>

                    <p>
                      <label for="last-name">Last name</label>
                      <input name="last-name" type="text" class="login-field" value="{{user.last_name}}" placeholder="Last name" id="last-name" />
                    </p>

                    <p>
                      <label for="password">Password</label>
                      <input name="password" type="password" class="login-field" value="" placeholder="Password" id="password" />
                    </p>

                    <p>
                      <label for="confirm">Confirm Password</label>
                      <input name="confirm" type="password" class="login-field" value="" placeholder="Password" id="confirm" />
                    </p>

                    <a id="update-btn" class="btn btn-large btn-block" href="#">Update</a>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div> <!-- /tiles -->

      </div> <!-- /container -->

      <footer>
        <div class="container">
          <div class="row">
            <div class="span7">
              <h3 class="footer-title">SQFlight is distributed under GPL v3 License</h3>
            </div> <!-- /span8 -->

            <div class="span5">
              <div class="footer-banner">
                <h3 class="footer-title"><img class="logo2" src="{{STATIC_URL}}images/logo2.png"> SQLite Administrator</h3>
              </div>
            </div>
          </div>
        </div>
      </footer>
      <script src="{{STATIC_URL}}js/vendor/jquery-1.8.2.min.js"></script>
      <script src="{{STATIC_URL}}js/application.js"></script>
      <script src="{{STATIC_URL}}js/vendor/jqdialog.min.js"></script>
      <script src="{{STATIC_URL}}js/controller/account.js"></script>
    <!--[if lt IE 8]>
      <script src="js/icon-font-ie7.js"></script>
      <script src="js/icon-font-ie7-24.js"></script>
      <![endif]-->
    </body>
    </html>
